<%@ page import="com.fantasy.utils.CookieUtils" %>
<%@ page import="com.fantasy.service.UserService" %>
<%@ page import="com.fantasy.service.impl.UserServiceImpl" %>
<%@ page import="com.fantasy.entity.User" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2022/3/21
  Time: 16:55
            左侧边导航栏  外加登录用到的模态框
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="../bootstrap/js/jquery/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<%--获得userid--%>
<%
    Cookie[] cookies = request.getCookies();
    String userId = CookieUtils.getCookie("userId", cookies);
%>
<div class="header">
    <h1 class="logo" style="margin-bottom: 5px;margin-top: 5px">
        <a data-toggle="modal" href="<%
        //判断是否登录 登录在跳转为myself界面 未登录则是模态框
        if (userId.equals("0")){
            out.print("#mymodel");
        }else{
            out.print("./myself.jsp");
        }
        %>" id="Avatar">
            <%
                if (!userId.equals("0")){
                    int Id = Integer.parseInt(userId);
                    UserService userService = new UserServiceImpl();
                    User user = userService.queryById(Id);
                    String headImg = user.getHeadImg();
            %>
            <img src="/fantasy/img/<%
            if (headImg!=null){
                out.print(headImg);
            }else{
                out.print("null.jpg");
            }
            %>" alt="" class="img-circle">
            <%
            }else{
            %>
            <%--       未登录状态下的头像         --%>
            <img src="../images/noLogin.jpg" alt="" class="img-circle">
            <%
                }
            %>
        </a>
    </h1>
    <ul class="nav">
        <li><a href="./index.jsp"><i class="fa fa-glass"></i>首页</a></li>
        <li><a href="partition.jsp"><i class="fa fa-clone"></i>视频分区</a></li>
        <li><a href="myself.jsp"><i class="fa fa-address-book"></i>个人中心</a></li>
        <li><a href="creation.jsp"><i class="fa fa-pencil"></i>创作者中心</a></li>
    </ul>
    <div class="search" style="padding-bottom: 50px;padding-right: 50px">
        <div class="cube" >
            <!-- 外层立方体 -->
            <div class="outer-cube">
                <div class="outer-top">
                    <img src="../images/001.jpg" />
                </div>
                <div class="outer-bottom">
                    <img src="../images/002.jpg" />
                </div>
                <div class="outer-front">
                    <img src="../images/003.jpg" />
                </div>
                <div class="outer-back">
                    <img src="../images/004.jpg" />
                </div>
                <div class="outer-left">
                    <img src="../images/005.jpg" />
                </div>
                <div class="outer-right">
                    <img src="../images/006.jpg" />
                </div>
            </div>
            <!-- 内层立方体 -->
            <div class="inner-cube">
                <div class="inner-top">
                    <img src="../images/0001.jpg" />
                </div>
                <div class="inner-bottom">
                    <img src="../images/0002.jpg" />
                </div>
                <div class="inner-front">
                    <img src="../images/0003.jpg" />
                </div>
                <div class="inner-back">
                    <img src="../images/0004.jpg" />
                </div>
                <div class="inner-left">
                    <img src="../images/0005.jpg" />
                </div>
                <div class="inner-right">
                    <img src="../images/0006.jpg" />
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 商品模态框部分 -->
<!-- Modal -->
<div class="modal fade" id="mymodel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">

        <div class="modal-content">
            <form class="form-horizontal" action="./user.do">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">登录</h4>
                </div>
                <input type="hidden" name="action" id="action" value="login">
                <div class="modal-body" style="height: 250px">
                    <div class="row" style="height: 250px">
                        <div class="col-md-1" style="height: 50px"></div>
                        <div class="col-md-10" style="height: 50px">
                            <div class="form-group" style="height: 50px;margin-top: 30px">
                                <label for="phone" class="col-sm-3 control-label" style="height: 50px">电话号码</label>
                                <div class="col-sm-9"  style="height: 50px">
                                    <input type="text" class="form-control" id="phone" name="phone"  >
                                    <p id="tips"></p>
                                </div>
                            </div>
                            <div class="form-group" style="height: 50px;margin-top: 50px">
                                <label for="password" class="col-sm-3 control-label" style="height: 50px">密码</label>
                                <div class="col-sm-9"  style="height: 50px">
                                    <input type="password" class="form-control" id="password" name="password" >
                                </div>
                            </div>

                        </div>
                        <div class="col-md-1" style="height: 250px"></div>
                    </div>
                </div>
                <div class="modal-footer" style="height: 70px;text-align: center">
                    <button type="button" class="btn btn-primary" style="margin-left: 50px" id="login">登录</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-left: 50px" id="close">关闭</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="../bootstrap/js/cookie.min.js"></script>
<script>
    $(function () {
        $("#Avatar").click(function () {
            $("#myModalLabel").text("登录")
        })
        /**
         * 正则表达式
         * @type {RegExp}
         */
        var zz=/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        $("#phone").blur(function () {
            if($("#phone").val()!==""){
                if (!zz.test($("#phone").val())){
                    $("#tips").html("<h4 style=\"color: red\">格式有误,请重新输入！</h4>");
                }else {
                    $("#tips").html("<h4 style=\"color: green\">格式正确</h4>");
                }
            }
        })
        /**
         * 注册前判断手机号格式是否正确
         */
        $("#login").click(function () {
            if ($("#tips").text()==="格式有误,请重新输入！"||$("#phone").val()==="") {
                alert("请重新输入！")
            } else {
                $("#login").attr("type",onsubmit);
            }
        })
        /**
         * 关闭模态框后刷新模态框的内容
         */
        $("#close").click(function () {
            window.location.reload();
        })
    })


</script>